<template>
  <div class="common-layout">
    <!-- <el-container class="layout-container-demo" style="height: 100px"> -->
    <el-container class="layout-container-demo">

      <el-header>
        <el-row align="middle" justify="center">

          <el-col :span="2" :offset="0">
            <!-- <div class="grid-content ep-bg-purple-dark" /> -->
            <el-link href="/index" :underline="false" type="primary">
              <h3>OPS-MANAGER</h3>
            </el-link>
          </el-col>

          <el-col class="usernamecol" :span="3" :offset="17" align="end" justify='end'>
            <!-- <p @click="logout">退出登录</p> -->
            <el-button :underline="false" size="large" text type="info">{{ auth.username }}</el-button>
            <!-- <el-button :underline="false" size="large" text type="info">xxx</el-button> -->
          </el-col>

          <el-col class="closecol" :span="2" :offset="0">
            <!-- <p @click="logout">退出登录</p> -->
            <el-button :underline="false" size="large" text type="info" @click="logout">退出登录</el-button>
          </el-col>

        </el-row>
      </el-header>

      <el-container>

        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="24">
              <h3 class="mb-2"><el-icon>
                  <!-- <Menu /> -->
                </el-icon> 菜单</h3>
              <el-menu default-active="2" 
              class="el-menu-vertical-demo" 
              :default-openeds="['1', '2', '3', '4']" 
              >

                <!-- 手动配置一级路由菜单 -->
                <el-menu-item index="1" @click="handleMenuItemClick('home')">
                  <!-- <el-link href="/index" :underline="false" type="primary">
                    <el-icon><Platform /></el-icon><h5>首页</h5>
                  </el-link> -->
                  <el-icon>
                    <Notebook />
                  </el-icon>
                  <router-link class="link" :to="{ name: 'home' }">
                    首页
                  </router-link>
                </el-menu-item>

                <!-- 遍历渲染一级路由菜单 -->
                <el-menu-item v-for="item in options" :key="item.text" :index="item.name"
                  @click="handleMenuItemClick(item.name)">
                  <el-icon>
                    <Notebook />
                  </el-icon>
                  <router-link class="link" :to="{ name: item.name }">
                    {{ item.text }}
                  </router-link>
                </el-menu-item>


                <!-- 遍历渲染二级路由菜单 -->
                <el-sub-menu v-for="item in auth.menulist" :key="item.title" :index="item.title">
                  <template #title>
                    <!-- <el-icon><message /></el-icon>Navigator One -->
                    <el-icon>
                      <Notification />
                    </el-icon>
                    {{ item.title }}
                  </template>
                  <el-menu-item-group>
                    <template #title></template>
                    <el-menu-item v-for="subname in item.value" :key="subname.name" :index="subname.name"
                      @click="handleMenuItemClick(subname.route)">
                      <!-- <el-button style="height: 100%; width: 100%;">
                        <router-link class="link" :to="{ name: subname.route }">
                          {{ subname.name }}
                        </router-link>
                      </el-button> -->
                      {{ subname.name }}

                    </el-menu-item>

                  </el-menu-item-group>

                  <!-- 三级菜单 -->
                  <!-- <div v-for="item2 in item">
                    <div v-for="item3 in item2">
                      <div v-if="item3.value">
                          <el-sub-menu :index="item3.name" >
                            <template #title>{{ item3.name }}</template>
                            <el-menu-item :index="item4.name" v-for="item4 in item3.value">{{ item4.name }}</el-menu-item>
                          </el-sub-menu>
                      </div>
                    </div>
                  </div> -->
                  <!-- 三级菜单 -->

                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>

        <el-container>
          <el-main class="elmain">
            <router-view></router-view>
          </el-main>

          <!-- <el-footer>到底了</el-footer> -->
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>

  <!-- <div id="App">
    <a href="http://ops.ihomecloud.cn:8000/">
      <el-button type="primary">返回首页</el-button>
    </a>
    <h1>Aihma-OPS</h1>
    <router-link :to="{ name: 'wgUpdate' }">
      <el-button type="primary" plain>后端服务更新</el-button>
    </router-link>&nbsp;
    <router-link :to="{ name: 'AliyunIndex' }">
      <el-button type="primary" plain>阿里云 RAM 账号管理</el-button>
    </router-link>&nbsp;
    <router-link :to="{ name: 'JenkinsBuild' }">
      <el-button type="primary" plain>Jenkins 构建</el-button>
    </router-link>&nbsp;
    <hr>
    <router-view></router-view>
    <hr>
    <p>到底了</p>
  </div> -->
  <!-- <p>menulist: {{typeof(menulist)}}{{menulist}}</p> -->
</template>

<script>
// -----未用懒加载加载组件-----
// import AliyunIndex from './components/Aliyun/AliyunIndex.vue'
// -----使用了懒加载加载组件
// const AliyunIndex = () => import('./components/Aliyun/AliyunIndex.vue');
// const index = () => import('./components/index.vue');


export default {
  name: 'index',
  components: {
    // WebSocket,
    // WebSo,
    // AliyunIndex,
    // index,:
  },
  methods: {
    goWs() {
      // console.log(111);
      this.$router.push('/wgUpdate')
    },
    logout() {
      localStorage.removeItem('auth')
      this.$router.push('/login')
      // location.reload()
    },
    // 使用命名路由跳转
    handleMenuItemClick(item) {
      // 执行路由跳转操作
      // console.log("xxdd:", item)
      this.$router.push({ name: item });
    }
  },
  data() {
    return {
      auth: JSON.parse(localStorage.getItem('auth')),
      // 菜单路由地址，上面通过 v-for 遍历渲染
      options: [
        // { name: 'home', text: 'rdp' },
        // { name: 'home', text: 'rdp' }
      ],
      // 可下拉二级菜单
      menu: [
        // rdp管理
        {
          title: '一级菜单1', value: [
            { name: '一级菜单1子菜单', route: 'rdp' },
            // { name: 'rdpget', route: 'rdpget' },
          ]
        },
        {
          title: '一级菜单2', value: [
            { name: '一级菜单2子菜单1', route: 'rdp2index' },
            { name: '一级菜单2子菜单2', route: 'rdp2' },
          ]
        },
        {
          title: '一级菜单3', value: [
            { name: '一级菜单3子菜单1', route: 'rdp3index' },
            { name: '一级菜单3子菜单2', route: 'rdp' },
          ]
        }
      ],
      // menulist: JSON.parse(localStorage.getItem('auth')).menulist,
    }
  }

}
</script>


<style>
/* .common-layout {
    width: 1900px;
  } */


/*设置点击前的样式 */

* {
  text-decoration: none;
  /* text-align: center; */
}


.link {
  text-decoration: none;
  color: #409eff;
}

.el-aside .router-link-active {
  text-decoration: none;
  color: #409eff;
}


/*设置点击后的样式 */
.router-link-active {
  text-decoration: none;
  color: #409eff;
}

.el-header {
  background-color: #222222;
}

/* .usernamecol {
  background-color: green;
}
.closecol {
  background-color: red;
} */
</style>


